<template>
  <div class="app-container">
    <!-- 优化后的导入功能卡片 -->
    <el-card class="box-card" :header="null">
      <div class="upload-section">
        <div class="upload-title">学生信息导入</div>

        <div class="upload-actions">
          <el-upload
            ref="uploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            class="upload-trigger"
          >
            <template #trigger>
              <el-button type="primary" size="medium">选取文件</el-button>
            </template>
          </el-upload>

          <el-button
            type="success"
            size="medium"
            :loading="upload.isUploading"
            @click="submitUpload"
          >
            {{ upload.isUploading ? '正在导入' : '开始导入' }}
          </el-button>
        </div>

        <div class="upload-tip">
          <el-alert
            title="仅允许导入 xls、xlsx 格式文件。"
            type="warning"
            show-icon
            :closable="false"
          />
        </div>
      </div>
    </el-card>

    <!-- 图表 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>已发布签到活动类型分布</span>
          </template>
          <div ref="signTypeChart" style="height: 300px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>最近7天签到活动趋势</span>
          </template>
          <div ref="trendChart" style="height: 300px" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="summary-row">
      <el-col :span="6" v-for="card in summaryCards" :key="card.title">
        <el-card class="summary-card">
          <div class="summary-icon" :style="{ backgroundColor: card.color }">
            <el-icon :size="24">
              <component :is="card.icon" />
            </el-icon>
          </div>
          <div class="summary-content">
            <div class="summary-title">{{ card.title }}</div>
            <div class="summary-value">{{ card.value }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getToken } from '@/utils/auth'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

import {
  Postcard,
  Avatar,
  Flag,
  Location,
  Promotion,
  Check,
  Key,
  CircleCheck
} from '@element-plus/icons-vue'

const uploadRef = ref(null)
const upload = reactive({
  isUploading: false,
  headers: { Authorization: 'Bearer ' + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + '/manage/student/excel/importData'
})

function submitUpload() {
  uploadRef.value.submit()
}
function handleFileUploadProgress() {
  upload.isUploading = true
}
function handleFileSuccess(response) {
  upload.isUploading = false
  uploadRef.value.clearFiles()
  ElMessage.success(response.msg)
}
function handleExceed() {
  ElMessage.warning('每次只能选择一个文件')
}
function beforeUpload(file) {
  const isExcel = file.type.includes('spreadsheet') || file.type.includes('excel')
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isExcel) {
    ElMessage.error('只能上传 Excel 文件!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
    return false
  }
  return true
}

const summaryCards = [
  { title: '班级数', value: 12, icon: Postcard, color: '#409EFF' },
  { title: '学生总数', value: 368, icon: Avatar, color: '#67C23A' },
  { title: '签到活动数', value: 54, icon: Flag, color: '#E6A23C' },
  { title: '位置签到', value: 20, icon: Location, color: '#F56C6C' },
  { title: '二维码签到', value: 15, icon: Promotion, color: '#909399' },
  { title: '普通签到', value: 12, icon: Check, color: '#1abc9c' },
  { title: '手势签到', value: 7, icon: Key, color: '#8e44ad' },
  { title: '签到码签到', value: 9, icon: CircleCheck, color: '#34495e' },
]

const signTypeChart = ref(null)
const trendChart = ref(null)

onMounted(() => {
  const pie = echarts.init(signTypeChart.value)
  pie.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: 'bottom' },
    series: [{
      name: '签到方式',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 20, name: '位置签到' },
        { value: 15, name: '二维码签到' },
        { value: 12, name: '普通签到' },
        { value: 7, name: '手势签到' },
        { value: 9, name: '签到码签到' }
      ]
    }]
  })

  const bar = echarts.init(trendChart.value)
  bar.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value' },
    series: [{
      name: '签到次数',
      data: [5, 8, 7, 6, 10, 9, 9],
      type: 'bar',
      barWidth: '50%'
    }]
  })
})
</script>

<style scoped>
.app-container {
  padding: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.title {
  font-size: 16px;
  font-weight: 500;
}

.upload-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.upload-inline {
  display: inline-block;
}

.tip-text {
  margin-left: 8px;
  max-width: 300px;
  transform: translateY(2px);
}

.summary-row {
  margin-top: 20px;
}

.summary-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border-left: 5px solid #eee;
  border-radius: 8px;
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 16px;
}

.summary-content {
  flex: 1;
}

.summary-title {
  font-size: 14px;
  color: #999;
}

.summary-value {
  font-size: 20px;
  font-weight: bold;
  margin-top: 4px;
}

.upload-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
}

.upload-title {
  font-size: 22px;
  font-weight: bolder;
  line-height: 32px;       /* ✅ 与 el-button 高度一致 */
  height: 32px;            /* ✅ 明确高度一致 */
  display: flex;
  align-items: center;     /* ✅ 内容垂直居中 */
  white-space: nowrap;
}


.upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-tip {
  font-size: 20px;
  line-height: 32px;         /* 让提示框与按钮高度一致 */
  padding: 0;
  display: flex;
  align-items: center;
}

.el-card {
  margin-bottom: -8px !important; /* ✅ 全局调低底部空间 */
}



.upload-tip :deep(.el-alert) {
  padding: 0 12px;
  line-height: 32px;         /* 让提示框与按钮高度一致 */
  min-height: auto;
  background: #fdf6ec;
}

.upload-trigger {
  font-size: 20px;
  font-weight: bold;         /* 与按钮一致 */
  height: 32px;               /* 与按钮统一高度 */
  line-height: 32px;
  display: inline-flex;
  align-items: center;
}



</style>
